// SPACING -------------------------------------

$spacingSizes: (
  'xxxs': $sp-xxxs,
  'xxs': $sp-xxs,
  'xs': $sp-xs,
  's': $sp-s,
  'm': $sp-m,
  'l': $sp-l,
  'xl': $sp-xl,
  'xxl': $sp-xxl,
  'xxxl': $sp-xxxl,
  '0': 0
);

@mixin margins($sizeName, $sizeSize) {
  .m-#{$sizeName} { margin: $sizeSize !important; }
  .mt-#{$sizeName} { margin-top: $sizeSize !important; }
  .mr-#{$sizeName} { margin-right: $sizeSize !important; }
  .mb-#{$sizeName} { margin-bottom: $sizeSize !important; }
  .ml-#{$sizeName} { margin-left: $sizeSize !important; }
  .mh-#{$sizeName} { margin-left: $sizeSize !important; margin-right: $sizeSize !important; }
  .mv-#{$sizeName} { margin-top: $sizeSize !important; margin-bottom: $sizeSize !important; }
}

@mixin paddings($sizeName, $sizeSize) {
  .p-#{$sizeName} { padding: $sizeSize !important; }
  .pt-#{$sizeName} { padding-top: $sizeSize !important; }
  .pr-#{$sizeName} { padding-right: $sizeSize !important; }
  .pb-#{$sizeName} { padding-bottom: $sizeSize !important; }
  .pl-#{$sizeName} { padding-left: $sizeSize !important; }
  .ph-#{$sizeName} { padding-left: $sizeSize !important; padding-right: $sizeSize !important; }
  .pv-#{$sizeName} { padding-top: $sizeSize !important; padding-bottom: $sizeSize !important; }
}

@include margins('auto', auto);

@each $name, $size in $spacingSizes {
  @include margins($name, $size);
  @include paddings($name, $size);
}


// LAYOUT

.h-100 {
  height: 100% !important;
}

.w-100 {
  width: 100% !important;
}

.flex-col {
  display: flex !important;
  flex-direction: column !important;
}

.flex-row {
  display: flex !important;
  flex-direction: row !important;
}

.align-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.position-relative {
  position: relative !important;
}


// TYPOGRAPHY -------------------------------------

.list--no-style {
  list-style: none;
  padding: 0;
  margin: 0;
}

.text--white {
  color: white !important;
}

.text--xs {
  font-size: $fs-xs !important;
}

.text--s {
  font-size: $fs-s !important;
}

.text--m {
  font-size: $fs-m !important;
}

.text--l {
  font-size: $fs-l !important;
}

.text--xl {
  font-size: $fs-xl !important;
}

.text--xxl {
  font-size: $fs-xxl !important;
}

.text--xxxl {
  font-size: $fs-xxxl !important;
}

.fw--normal {
  font-weight: $fw-normal !important;
}

.fw--medium {
  font-weight: $fw-medium !important;
}

.fw--bold {
  font-weight: $fw-bold !important;
}

.fw--boldest {
  font-weight: $fw-boldest !important;
}

.td--underline {
  text-decoration: underline !important;
}

.text--nowrap {
  white-space: nowrap !important;
}


// POINTER -------------------------------------

.pe-none {
  pointer-events: none !important;
}

.pe-all {
  pointer-events: all !important;
}

.c-pointer {
  cursor: pointer !important;
}


// MISC -------------------------------------

.screen-reader-only {
  @include screen-reader-only;
}

.shadow-scroll {
  $shadow-scroll-color: var(--shadow-scroll-color, black);
  $shadow-scroll-spread: var(--shadow-scroll-spread, 0px);
  $shadow-scroll-blur: var(--shadow-scroll-blur, 20px);
  $shadow-scroll-backdrop-color: var(--shadow-scroll-backdrop-color, white);
  $shadow-scroll-backdrop-blur: var(--shadow-scroll-backdrop-blur, #{$shadow-scroll-blur});
  $shadow-scroll-size: calc(#{$shadow-scroll-spread} + #{$shadow-scroll-blur});

  box-shadow:
    inset #{$shadow-scroll-size} 0 #{$shadow-scroll-blur} calc(#{$shadow-scroll-blur} * -1) #{$shadow-scroll-color},
    inset calc(#{$shadow-scroll-size} * -1) 0 #{$shadow-scroll-blur} calc(#{$shadow-scroll-blur} * -1) #{$shadow-scroll-color},
    inset 0 #{$shadow-scroll-size} #{$shadow-scroll-blur} calc(#{$shadow-scroll-blur} * -1) #{$shadow-scroll-color},
    inset 0 calc(#{$shadow-scroll-size} * -1) #{$shadow-scroll-blur} calc(#{$shadow-scroll-blur} * -1) #{$shadow-scroll-color};

  .shadow-scroll-content {
    box-shadow:
      inset #{$shadow-scroll-size} 0 #{$shadow-scroll-backdrop-blur} 0 #{$shadow-scroll-backdrop-color},
      inset calc(#{$shadow-scroll-size} * -1) 0 #{$shadow-scroll-backdrop-blur} 0 #{$shadow-scroll-backdrop-color},
      inset 0 #{$shadow-scroll-size} #{$shadow-scroll-backdrop-blur} 0 #{$shadow-scroll-backdrop-color},
      inset 0 calc(#{$shadow-scroll-size} * -1) #{$shadow-scroll-backdrop-blur} 0 #{$shadow-scroll-backdrop-color};
  }
}
